<template>
  <div class="Park">
    <baidu-map center="合肥市" :scroll-wheel-zoom="true">
      <bm-overview-map
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :isOpen="true"
      ></bm-overview-map>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bm-traffic :predictDate="{ weekday: 7, hour: 12 }" v-if="value">
      </bm-traffic>

      <input type="text" v-model="keyword" class="location" />
      <input
        type="text"
        v-model="location"
        class="location"
        style="top: 60px"
      />
      <el-button @click="getLocation" class="button">确定</el-button>
      <!-- 停车场位置 -->
      
      <bm-marker
        :position="i.coor"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
        v-for="(i,index) in windowInfo"
        :key="index"
        @click="creatInfo(index)"
       
      >
        <bm-info-window
          :show="i.show"
          @close="infoWindowClose(index)"
          @open="infoWindowOpen(index)"
          
          >
          <h4>{{i.parkName}}</h4>
          <p>剩余车位：{{i.resPark}}</p>
          <p>{{i.cost}} 元/小时</p>
        
          </bm-info-window
        >
      </bm-marker>
         <!--  -->
      <bm-view class="map"> </bm-view>
      <!-- 搜索 -->
      <bm-local-search
        :keyword="searchKeyword"
        :auto-viewport="true"
        :location="searchLocation"
      ></bm-local-search>
    </baidu-map>

    <el-button style="position: absolute; z-index: 10; top: 50px; right: 50px"
      >显示交通流量</el-button
    >
    <el-switch
      v-model="value"
      active-color="#13ce66"
      inactive-color="#ff4949"
      style="position: absolute; z-index: 10; top: 60px; right: 180px"
    >
    </el-switch>

    <!-- 搜索 -->
  </div>
</template>


<script>
export default {
  name: "Park",
  data() {
    return {
      message: {},
      value: false,
      
      location: "",
      searchLocation: "",
      keyword: "",
      searchKeyword: "",
      windowInfo: [

      ]
    };
  },
  methods: {
    getLocation() {
      this.searchLocation = this.location; //城市名
      this.searchKeyword = this.keyword + "停车场"; //关键词
    },
    getPark(){
       console.log(this.windowInfo);
    },
    // 打开和关闭窗体
    infoWindowClose (index) {
      this.windowInfo[index].show = false
    },
    infoWindowOpen (index) {
      this.windowInfo[index].show =true
    },
    creatInfo(index)
    {
      this.windowInfo[index].show=true;
    },
    
    
  },

  created() {
    var url = "http://localhost:3000"; //后端服务端口

    // 获取后端返回的数据

    this.$axios
      .get(url + "/product")
      .then((response) => {
        // console.log(response.data);
        this.message = response.data;
        for(let i=0;i<this.message.sqlresult.length;i++)
        {
          this.windowInfo.push({
             parkID: this.message.sqlresult[i].parkID,
             parkName: this.message.sqlresult[i].parkName,
             coor: {lng: this.message.sqlresult[i].lng,
                    lat: this.message.sqlresult[i].lat},
             resPark: this.message.parkSqlResult[i].resPark,
             show: false,
             cost: this.message.parkSqlResult[i].cost,
        })
        }
        
        console.log("windowinfo对象创建成功");
        console.log(this.windowInfo);
      })
      .catch(function (error) {
        console.log(error);
      });

    //获取弹窗信息
  },
};
</script>


<style scoped>
.Park {
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 700px;
}
.location {
  width: 300px;
  height: 30px;
  outline: none;
  background: white;
  position: absolute;
  left: 500px;
  top: 20px;
  border: 0;
  box-shadow: 2px 2px 2px rgb(236, 235, 235), -2px -2px 2px rgb(236, 235, 235),
    -2px 2px 2px rgb(236, 235, 235), 2px -2px 2px rgb(236, 235, 235);
  z-index: 10;
}
.button {
  display: inline-block;

  position: absolute;
  left: 860px;
  top: 32px;
  z-index: 10;
}
</style>